<template>
    <div class="login_container">
        <div class="login_box">
            <div class="avatar_box">
                <img src="@/assets/logo.png" />
            </div>

            <el-form
                    ref="loginForm"
                    :model="loginForm"
                    :rules="loginFormRules"
                    label-width="0px"
                    class="login_form"
            >
                <el-form-item prop="username">
                    <el-input prefix-icon="el-icon-user" placeholder="用户名" v-model="loginForm.username"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input
                            prefix-icon="el-icon-lock"
                            placeholder="密码"
                            v-model="loginForm.password"
                            type="password"
                    ></el-input>
                </el-form-item>
              <el-form-item prop="password">
                <img :src="imgUrl"  @click="getCode"/> <input type="text" v-model="loginForm.code">
                {{$store.state.name}}--{{$store.state.age}}--{{$store.state.counter}}
              </el-form-item>

                <el-form-item class="btns">
                    <el-button type="primary" @click.prevent="login">登录</el-button>
                    <el-button type="info" @click="resetLogin">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
      

    </div>
</template>
<script>
    export default {
        data() {
            return {
                imgUrl:'',
                loginForm: {
                  username: "",
                  password: "",
                  code:'',
                  codeUuid:''
                },
                loginFormRules: {
                  username: [
                        { required: true, message: "用户名必填", trigger: "blur" },
                        { min: 4, max: 8, message: "用户名在4到8个字符之间", trigger: "blur" }
                    ],
                  password: [
                        { required: true, message: "密码必填", trigger: "blur" },
                        {
                            min: 4,
                            max: 8,
                            message: "用户密码在4到8个字符之间",
                            trigger: "blur"
                        }
                    ]
                }
            };
        },
        methods: {
            resetLogin() {
                this.$refs.loginForm.resetFields();
            },

            login() {
                this.$refs.loginForm.validate(valid => {
                  if (!valid) return;

                  let url = "/manager/login"
                  this.$axios.post(url,this.loginForm)
                      .then((res)=>{
                        console.log(res)
                        if (res.data.code == 200) {
                          //把token 保存在 sessionStorage
                          sessionStorage.setItem("token",res.data.token);
                          //把用户名 赋值给 Vuex的 username属性
                         // this.$store.state.username = res.data.data.userName  // 错误
                          this.$store.commit("setUsername",res.data.data.userName);
                          sessionStorage.setItem("myname",res.data.data.userName)
                          this.$message({
                            message: res.data.msg,
                            type: 'success',
                            duration:1000
                          });
                          //跳转到主页
                          this.$router.push("Home")
                        }else {
                          this.$message({
                            message: res.data.msg,
                            type: 'error',
                            duration:1000
                          });
                        }
                      })
                });
            },
          getCode(){
              let url = "/manager/code"
              this.$axios.get(url).then((res)=>{
                this.imgUrl = res.data.img;
                this.loginForm.codeUuid = res.data.uuid ;
              })
          }
        },
      created() {
          this.getCode();
      }
    };
</script>
<style lang="less" scoped>
    .login_container {
        background-color: #2b4b6b;
        height: 100%;
    }
    .login_box {
        width: 450px;
        height: 300px;
        background-color: #fff;
        border-radius: 3px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        .avatar_box {
            height: 100px;
            width: 100px;
            border-radius: 50%;
            border: 1px solid #eee;
            padding: 10px;
            box-shadow: 0 0 10px #ddd;
            position: absolute;
            left: 50%;
            transform: translate(-50%, -30%);
            background-color: #fff;
            img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
                background-color: #eee;
            }
        }
    }
    .btns {
        display: flex;
        justify-content: center;
    }
    .login_form {
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
    }
</style>